<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
		xmlns:p="http://primefaces.org/ui"
		xmlns:appcc="http://java.sun.com/jsf/composite/components"
		contentType="text/html" 
	template="/WEB-INF/layouts/main.xhtml"
	encoding="UTF-8" lang="${userContext.locale}">
	<ui:define name="popup">
		<p:dialog id="islamicLibraryDialog" header="#{messages['main.content.submitRequest.popup.message.header']}" modal="true" height="370" width="500"
			widgetVar="mpIL" >  
			<h:form>
	    		<h:outputText>value</h:outputText>
    		</h:form>
		</p:dialog>  
	</ui:define>
	<ui:define name="content">
		
		<script type="text/javascript">
	       	function changeColor(){
	              jQuery('.trjdk-main-content-submitRequest-list').css('color','#333');
	        }
	       	jQuery(function () {
	       		jQuery('.trjdk-main-content-submitRequest-list').css('font-size','20px');
	       	});
    	</script>
    	
		<p:panel styleClass="blank" id="submitRequestPanel"> 
						 
						<p:panel styleClass="blank" style="width:350px; text-align:center"> 
							<h:outputText value="#{messages['main.content.submitRequest.suggest']}" styleClass="customTitle" />
						</p:panel>
					
						<!-- Submit a request -->
						<h:form id="submitRequestForm" >
							<p:messages id="messagesSubmitRequest" showDetail="true" autoUpdate="true" closable="true" /> 
							<h:panelGrid columns="10" styleClass="trjdk-main-content-submitRequest-grid">
							
								<!-- Youtube link -->
								<p:inputText id="youtubeLink" styleClass="trjdk-main-content-submitRequest-inputText"
									value="#{submittingRequest.criteria.youtubeLink}" required="true"
									label="#{messages['main.content.submitRequest.suggest.youtubeLink']}">
									<p:ajax event="blur" update="youtubeVideo" partialSubmit="true"/>
								</p:inputText>	
								<p:watermark for="youtubeLink" value="#{messages['main.content.submitRequest.suggest.youtubeLink']}" />
								<p:message display="icon" for="youtubeLink"/>  
								<p:graphicImage id="ylInfo" value="/img/icon/info.png" />
								<p:tooltip for="ylInfo" value="" showEffect="fade" hideEffect="fade" />
								
								<!-- Theme -->
								<p:selectOneMenu effect="fade" id="theme" value="#{submittingRequest.criteria.theme}"
									styleClass="trjdk-main-content-submitRequest-list" required="true" onchange="changeColor();"
									label="#{messages['main.content.submitRequest.suggest.theme']}" converter="#{themeConverter}">  
									<f:selectItem itemLabel="#{messages['main.content.submitRequest.suggest.theme']}" itemValue=""/>  
		            				<f:selectItems value="#{themeUtil.getAllTheme()}" var="theme" itemLabel="#{theme.libelle}" 
		            					itemValue="#{theme}"/>    
								</p:selectOneMenu>
								<h:panelGroup></h:panelGroup>
								<p:message display="icon" for="theme"/> 
								<p:graphicImage id="tInfo" value="/img/icon/info.png" />
								<p:tooltip for="tInfo" value="" showEffect="fade" hideEffect="fade" />
								
								<!-- Channel TV -->
								<p:selectOneMenu effect="fade" id="channel" value="#{submittingRequest.criteria.channel}"
									styleClass="trjdk-main-content-submitRequest-list" required="true" onchange="changeColor();"
									label="#{messages['main.content.submitRequest.suggest.channel']}" converter="#{channelConverter}">  
									<f:selectItem itemLabel="#{messages['main.content.submitRequest.suggest.channel']}" itemValue=""/>  
		            				<f:selectItems value="#{channelUtil.getAllChannels()}" var="channel" itemLabel="#{channel.libelle}" 
		            					itemValue="#{channel}"/>    
								</p:selectOneMenu>
								<h:panelGroup></h:panelGroup>
								<p:message display="icon" for="channel"/> 
								<p:graphicImage id="cInfo" value="/img/icon/info.png" />
								<p:tooltip for="cInfo" value="" showEffect="fade" hideEffect="fade" />
								
								<!-- Diffused -->
								<p:calendar locale="fr" showButtonPanel="true" navigator="true" id="diffused" 
									styleClass="trjdk-main-content-submitRequest-calendar"
									value="#{submittingRequest.criteria.diffused}" required="true"
									label="#{messages['main.content.submitRequest.suggest.diffused']}"/>
								<p:watermark for="diffused" value="#{messages['main.content.submitRequest.suggest.diffused']}" />
								<p:message display="icon" for="diffused"/>  	
								<p:graphicImage id="dInfo" value="/img/icon/info.png" />		
								<p:tooltip for="dInfo" value="" showEffect="fade" hideEffect="fade" />				
							</h:panelGrid>
							
							<h:panelGrid columns="5" styleClass="trjdk-main-content-submitRequest-grid">
								<!-- Intervenants -->
								<p:autoComplete id="intervenants" maxlength="250" value="#{submittingRequest.criteria.listContributors}" 
									styleClass="trjdk-main-content-submitRequest-inputText" completeMethod="#{submittingRequest.completeIntervenants}" multiple="true">
									<p:ajax event="blur" partialSubmit="true" update="textsOfVideo"/>
								</p:autoComplete>  
								<p:graphicImage id="iInfo" value="/img/icon/info.png" />		
								<p:tooltip for="iInfo" value="" showEffect="fade" hideEffect="fade" />	
								<p:watermark for="intervenants" value="#{messages['main.content.submitRequest.suggest.contributors']}" />
								<p:message display="icon" for="intervenants"/>  
								
							</h:panelGrid>
							
							<!-- Youtube video -->
							<p:panel styleClass="blank" id="youtubeVideo">
								<p:media value="#{submittingRequest.criteria.youtubeLinkShowing}" width="350" height="315" player="flash" 
								 rendered="#{submittingRequest.checkYoutubeLink()}"/>								
							
								<!-- Texts of video -->
								<p:panel styleClass="blank" 
									rendered="#{submittingRequest.checkYoutubeLink()}"> 
									<h:outputText value="#{messages['main.content.submitRequest.suggest.textofVideo']}" style="width:350px; text-align:center" styleClass="customTitle" />
									<p:graphicImage id="oInfo" value="/img/icon/info.png" />		
									<p:tooltip for="oInfo" value="" showEffect="fade" hideEffect="fade" />	
								
									<p:dataList value="#{submittingRequest.criteria.listOriginalTextVideo}" var="originalTextVideo" type="definition"
										id="textsOfVideo" >  
									    
									    <!-- Author of text -->
									    <p:selectOneMenu effect="fade" id="intervenants" value="#{originalTextVideo.contributor}"
											styleClass="trjdk-main-content-submitRequest-list" required="true" onchange="changeColor();"
											label="#{messages['main.content.submitRequest.suggest.contributors.select']}">  
											<f:selectItem itemLabel="#{messages['main.content.submitRequest.suggest.contributors.select']}" itemValue=""/>  
											<f:selectItem itemLabel="#{messages['main.content.submitRequest.suggest.contributors.select.other']}" itemValue="other"/>  
				            				<f:selectItems value="#{submittingRequest.criteria.listContributors}" var="contributor" itemLabel="#{contributor}" 
				            					itemValue="#{contributor}"/>    
										</p:selectOneMenu>
										
										<!-- first time -->
										<p:calendar value="#{originalTextVideo.timeBegin}" pattern="HH:mm:ss" timeOnly="true" 
											minHour="0" maxHour="2" styleClass="trjdk-main-content-submitRequest-inputText" />  
										
										<!-- last time -->
										<p:calendar value="#{originalTextVideo.timeEnd}" pattern="HH:mm:ss" timeOnly="true" 
											minHour="0" maxHour="2" styleClass="trjdk-main-content-submitRequest-inputText"/>  
										
										<br/>
										
										<!-- original text -->
										<p:inputText id="originalText" styleClass="trjdk-main-content-submitRequest-inputText"
											value="#{originalTextVideo.originalText}" required="true"
											label="#{messages['main.content.submitRequest.suggest.youtubeLink']}">
										</p:inputText>	
										<p:watermark for="originalText" value="#{messages['main.content.submitRequest.suggest.textofVideo.input']}" />
										<p:message display="icon" for="originalText"/>  
										
										<!-- Remove an original text -->	
										<p:commandLink value="-" update="textsOfVideo" immediate="true"
													styleClass="trjdk-main-banner-content-subscription-button" 
													action="#{submittingRequest.criteria.removeOriginalText(originalTextVideo)}" />	
													
										<!-- Islamic library -->	
										<p:commandLink value="B" 
													styleClass="trjdk-main-banner-content-subscription-button" 
													onclick="mpIL.show()" type="button"/>				
									  </p:dataList>  
									  
									  <!-- Add an original text -->	
										<p:commandLink value="+" update="textsOfVideo"
															styleClass="trjdk-main-banner-content-subscription-button"  
															action="#{submittingRequest.criteria.addOriginalText}" immediate="true"/>
								</p:panel>						
							</p:panel>

											
						</h:form>
		</p:panel>						
		
	</ui:define>
</ui:composition>